<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏</title>
		<style>
			*{
				/* 盒模型，字体、去掉超链接的下划线，去掉列表项标志 */
				padding:0;
				margin:0;
				font-size: 16px;
				color:#ffffff;
				font-family: 微软雅黑;
				text-decoration: none;
				list-style: none;/* 去掉列表项标志 */
				
			}
			/* 1.左栏外层：宽高、背景颜色、 */
			article{
				width: 235px;
				height: 470px;
				background-color: #949494;
			}
			/* 2.左栏内层ul li：登高、定宽、垂直水平居中颜色、相对定位【钩点位】 */
			article ul.sidebar li{
				height:47px;
				width: 235px;
				bo rder:1px solid red;
				line-height: 47px;
				text-align: center;
				position: relative;
			}
			article ul.sidebar li:hover{
				background-color: #c86c2b;
			}
			/* 3.弹出框    找到ul,li第一行，加div .outer*/
			article ul.sidebar div.outer{
				width:500px;
				height:470px;
				border:1px solid red;
				position: absolute;
				left:235px;
				z-index: 999;
				/* 学习JQuery显示与隐藏属性: 动态*/
				display: block;
			}
			.sidebar li span{
				float:right;
				margin-right: 20px;
             }
			.sidebar li a{
				position: absolute;
				left:20px;
			}
		</style>
	</head>
	<body>
		<!-- 左栏外围：语义化元素/结构化标记等同于div+别名形式，优点：有利于SEO优化
		      article元素：独立的内容区域空间，使用场景：新闻、博客区域、左栏等
		 -->
		 <article>
		 	<ul class="sidebar">
				<!-- 挂靠 -->
				<div class="outer"></div>
		 		<li><a href="#">手机 平板 电话卡</a>
				<span>></span>
				</li>
		 		<li><a  href="#">电视 盒子</a>
				<span>></span>
				</li>
		 		<li><a  href="#">路由器 智能硬件</a>
				<span>></span>
				</li>
		 		<li><a  href="#">移动电源 插线板</a>
				<span>></span>
				</li>
		 		<li><a  href="#">耳机 音箱</a>
				<span>></span>
				</li>
		 		<li><a  href="#">电池 存储卡</a>
				<span>></span>
				</li>
		 		<li><a  href="#">保护套 后盖</a>
				<span>></span>
				</li>
		 		<li><a  href="#">贴膜 其他配件</a>
				<span>></span>
				</li>
		 		<li><a  href="#">米兔 服装</a>
				<span>></span>
				</li>
		 		<li><a  href="#">箱包 其他周边</a>
				<span>></span>
				</li>
		 	</ul>
		 </article>
	</body>
</html>